/* 样式 */
body,.hero_ydc,.navbar{
	width: 81.25rem;
	margin: 0 auto;
}

/* 导航栏激活 */
.navbar-active {
	color: blueviolet;
}
/* -----------------------index------------------------- */
/* 瀑布 */
.list_pubu{
	/* 一行几排 */
	column-count: 5;
	/* 一行间隔 */
	column-gap: 0;
	
	& .item{
		/* 当前第几个 */
		counter-increment: pubo;
		
		position: relative;
		margin: 2px;
		
		border: 1px solid;
	}
	.item::after{
		/* 配合伪元素记录自己是第几个 */
		content: counter(pubo);
		
		position: absolute;
		top: 0;
		right: 0;
		width: 20px;
		height: 20px;
		background: rgba(0,0,0,.5);
		text-align: center;
		color: #fff;
		line-height: 18px;
		border-bottom-left-radius: 10px;
	}
	.item img{
		width: 100%;
	}
}
/* flex+margin排版布局 */
.f_listbox{
	.item{
		width: 50px;
		height: 50px;
		border: 1px solid;
		border-radius: 10px;
		background-color: #272C34;
		color: #fff;
		text-align: center;
		line-height: 50px;
		
	}
	.item1{
		margin: auto;
	}
	/* 奇数/偶数子类 margin-left:吃掉左边靠右 */
	/* .item2:nth-child(2n){
		margin-left: auto;
	}
	.item2:nth-child(2n+1){
		margin-left: auto;
	} */
	
	/* 指定子类定义 margin:auto;两边都靠边 */
	.item2:nth-child(9){
		background-color: red;
		
		/* 两边都靠边 */
		margin: auto;
		/* 吃掉左边靠右 */
		/* margin-left: auto; */
		/* 吃掉右边靠左 */
		/* margin-right: auto; */
	}
	
	/* 定义固定边距：一行8个*/
	--n:8;
	--gap:calc((100% - 50px * var(--n) ) / var(--n) /2);
	.item3{
		margin: 10px var(--gap);
	}
}
/* -----------------------bulma------------------------- */
/* 列布局 */
/* 一行6543列 */
.columns_box .column_6 .column,.columns_box .column_5 .column,
.columns_box .column_4 .column,.columns_box .column_3 .column,
.columns_box .column_2 .column{
	margin-bottom: 0.625rem;
}
.columns_box figure{
	margin: 0 auto;
}
.columns_box .content-pl{
	padding-left: 1.875rem;
}

/* 更改bulma属性 */
.content figure img{
	display: block;
	width: auto;
}
.foot1{
	background-color: #2A2A2A;
	color: #fff;
	font-size: 12px;
	& span{
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 35px;
		margin-right: 10px;
		border: 1px solid #fff;
		line-height: 30px;
		text-align: center;
	}
}

/* ----------------------------------------------------- */


@media screen and (max-width : 768px){
	.columns_box .column_6 .column:nth-of-type(6n+1),
	.columns_box .column_5 .column:nth-of-type(5n+1),
	.columns_box .column_4 .column:nth-of-type(4n+1),
	.columns_box .column_3 .column:nth-of-type(3n+1),
	.columns_box .column_2 .column:nth-of-type(2n+1){
	    margin-left:0;
	}

	.columns_box .column_6 .column,
	.columns_box .column_5 .column,
	.columns_box .column_4 .column,
	.columns_box .column_3 .column,
	.columns_box .column_2 .column{
		width: 100%;
	}
}
/* 媒体查询 */
@media screen and (max-width : 1300px){
	body,.hero_ydc,.navbar{
		width: 1200px;
		margin: 0 auto;
	}
}
@media screen and (max-width : 1200px){
	body,.hero_ydc,.navbar{
		width: 1000px;
		margin: 0 auto;
	}
}
@media screen and (max-width : 1000px){
	body,.hero_ydc,.navbar{
		width: 900px;
		margin: 0 auto;
	}
}
@media screen and (max-width : 900px){
	body,.hero_ydc,.navbar{
		width: 800px;
		margin: 0 auto;
	}
	.list_pubu{
		column-count: 4;
	}
}
@media screen and (max-width : 800px){
	body,.hero_ydc,.navbar{
		width: 700px;
		margin: 0 auto;
	}
}
@media screen and (max-width : 700px){
	body,.hero_ydc,.navbar{
		width: 600px;
		margin: 0 auto;
	}
	.columns.is-multiline{
		display: flex;
		justify-content: space-between;
	}
	.list_pubu{
		column-count: 3;
	}
	
}
@media screen and (max-width : 600px){
	body,.hero_ydc,.navbar{
		width: 500px;
		margin: 0 auto;
	}
	.list_pubu{
		column-count: 3;
	}
}
@media screen and (max-width : 500px){
	body,.hero_ydc,.navbar{
		width: auto;
		margin: 0 auto;
	}
	.list_pubu{
		column-count: 2;
	}
}


/* 公共 */
.flex{
	display: flex;
	flex-wrap: wrap;
}